<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hello</title>
    </head>
    <body>
        <!-- 引入vue的js文件，放在文件的头部 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

        <div id="root">
            <!-- 插值语法： {{xxx}} 是js的表达式，且可以获取data里的所有属性 -->
            <h1>hello，{{name}}</h1>
        </div>

        
        <script type="text/javascript">
            // 阻止vue启动时候生成生产提示
            Vue.config.productionTip = false    

            // 创建vue实例
            const x = new Vue({
                el:"#root",  // 用于指定vue实例为哪个容器服务，值通常是css选择器字符串，那这个就当成id选择器
                data() {
                    return {
                        name: 'aBiu'
                    }
                },
            })
        </script>
    </body>
</html>